<template>
  <div class="container">
    <aside class="sidebar">
      <div class="manager-square" 
        @click="navigateTo('manager')" 
        style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <span>管理</span>
        <span>首页</span>
      </div>
      <div class="manager-square" 
        @click="navigateTo('student')" 
        style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <span>学生</span>
        <span>管理</span>
      </div>
      <div class="manager-square" 
        @click="navigateTo('interaction')" 
        style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <span>互动</span>
        <span>数据</span>
      </div>
      <div class="manager-square" 
        @click="navigateTo('dialogue')" 
        style="display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <span>对话</span>
        <span>数据</span>
      </div>
    </aside>
    <div class="right-content">
      <header class="header">
        <div class="header-left">
          <img src="@/assets/svgs/nine.svg" @click="navigateTo('dashboard')" alt="Logo" class="header-icon" style="cursor: pointer;" />
          <div class="manager-title">AIGC智育优学教育平台</div>
        </div>
        <div class="teacher-initial" style="color: white;">{{ teacherInitial }}</div>
      </header>
      <main class="main">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import emitter from '@/utils/eventBus';

const router = useRouter();

const teacherInitial = '张';
const currentCourseManageId = ref(null);

onMounted(() => {
  const courseManageId = router.currentRoute.value.params.courseManageId;
  currentCourseManageId.value = courseManageId;
});

const navigateTo = async (page) => {
  if (page === 'dashboard') {
    router.push('/teacher/dashboard');
  }
  if (page === 'manager') {
    router.push('/teacher/manager');
  } 
  // if (page === 'student') {
  //   router.push(`/teacher/manager/student/${currentCourseId.value}`);
  // }
  // if (page === 'interaction') {
  //   router.push(`/teacher/manager/interaction/${currentCourseId.value}`);
  // } 
  // if (page === 'dialogue') {
  //   router.push(`/teacher/manager/dialogue/${currentCourseId.value}`);
  // }
  if (page === 'student') {
    router.push(`/teacher/manager/student`);
  }
  if (page === 'interaction') {
    router.push(`/teacher/manager/interaction`);
  } 
  if (page === 'dialogue') {
    router.push(`/teacher/manager/dialogue`);
  }
};

</script>

<style scoped>
/* 复制原来的 CSS，但只保留 container, sidebar, right-content, header, main 相关的样式 */
.container {
display: flex;
min-height: 100vh;
background-color: #f5f5f5;
}

.sidebar {
width: 60px;
height: 100vh;
background: linear-gradient(to bottom, #43a1e4, #756cdb);
padding: 20px 10px;
position: fixed;
left: 0;
top: 0;
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 50px;
z-index: 10;  
}

.manager-square {
width: 60px;
height: 60px;
background-color: #1b61a7; 
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: all 0.3s;
}

.manager-square:hover,
.manager-square.active {
background-color: #13227a; 
opacity: 1;
}

.right-content {
flex: 1;
display: flex;
flex-direction: column;
background-color: white;
}

.header {
height: 50px;
width: 100%;
background: linear-gradient(to right, #43a1e4, #756cdb);
position: fixed;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 100;
}

.header-left {
display: flex;
align-items: center;
gap: 30px;
margin-left: 40px;
}

.manager-title {
color: white;
font-size: 16px;
}

h2 {
margin-left: 0 !important;
padding-left: 70px;
}

.main {
margin-top: 50px;
flex: 1;
display: flex;
}

</style>